import React, { Component } from 'react';
import { Text, View, StyleSheet, TextInput, Dimensions, TouchableOpacity } from 'react-native';
import { Button, InputItem, Toast } from 'antd-mobile-rn';
import constants from '../../utils/constants';
import api from '../../utils/api';
import loginService from '../../service/loginService';
import Utils from '../../utils';


const w = (Dimensions.get("window").width - 40) / 6;

const styles = StyleSheet.create({
    InputItemView: {
        padding: 20,

    }
});

export default class InputBindPhoneCode extends Component {


    timer = null

    constructor(props) {
        super(props);
        this.state = {
            code: "",
            time: 60,
            sendCode: false
        }
    }


  


    componentDidMount() {
      
        this._initCodeTimer();
        
    }

    componentWillUnmount() {
        console.log("remove");
        //删除定时器
        clearInterval(this.timer);
    }


    /**
     * 验证码输入完成
     */
    onCodeInputComplete = (code) => {

        const { navigate,state } = this.props.navigation; 

        const phone = state.params.phone.replace(/\s/g,"");

        /**
         * 绑定手机
         */
        loginService.bindPhone({
            phone:phone,
            code:code
        },()=>{

            Utils.getLoginInfo().then(user=>{
                user.bind = true;
                user.phone = phone;
                Utils.setStorage("LoginUserInfo",user).then(()=>{
                    Utils.navigation(this.props.navigation,"Home",{})
                })
            })

           
        });
    }

    /**
     * 文本事件
     */
    handleTextChange = (value) => {
        this.setState({
            code: value
        });
        if (value.length == 6) {
            this.onCodeInputComplete(value);
        }
    }

    _initCodeTimer = ()=>{
        this.setState({
            sendCode: true
        })
        this.timer = setInterval(() => {
            if (this.state.time <= 0) {
                clearInterval(this.timer);
                this.setState({
                    sendCode: false,
                    time: 60
                });
                return;
            }
            this.setState({
                time: this.state.time - 1
            })
        }, 1000)
    }

    /**
    * 发送验证码
    */
    handleSendPhoneCode = () => {
        if (this.state.sendCode) {
            return;
        }

        const { navigate,state } = this.props.navigation;
        const phone = state.params.phone.replace(/\s/g,"");
        //发送验证码
        loginService.sendCode({
            serviceType:"bind",
            phone:phone
        },()=>{
           this._initCodeTimer();
        });

        


       
    }


    render() {

        const { state } = this.props.navigation;
        const { params } = state;
        const { time } = this.state;
        const codeArray = this.state.code.split("");
        const getCodeInputStyle = (i) => {
            if (codeArray.length == i) {
                return { width: w - 10, height: w - 10, borderWidth: 1, borderColor: constants.themeColor, justifyContent: "center", alignItems: "center", borderRadius: 3 }
            }
            return { width: w - 10, height: w - 10, borderWidth: 1, borderColor: "#666", justifyContent: "center", alignItems: "center", borderRadius: 3 }
        }

        return (
            <View style={{ backgroundColor: "white", flex: 1 }}>
                <View style={styles.InputItemView}>
                    <Text>已发送至 +86 {params.phone} </Text>
                </View>
                <TouchableOpacity onPress={() => { this.refs.input.focus(); }}>
                    <View style={styles.InputItemView}>

                        <View style={{ flex: 1, position: "relative" }}>
                            <TextInput
                                ref="input"
                                onChangeText={this.handleTextChange.bind(this)}
                                autoFocus={true}
                                keyboardType="phone-pad"
                                maxLength={6}
                                style={{ borderWidth: 0 }}
                                underlineColorAndroid={"transparent"}
                            >
                            </TextInput>

                            <View style={{ flexDirection: "row", position: "absolute", width: "100%", left: 0, backgroundColor: "transparent", alignItems: "center" }}>
                                {
                                    [0, 1, 2, 3, 4, 5].map(i => {
                                        return (
                                            <View key={i} style={{ width: w, height: w, padding: 5, alignItems: "center" }}>
                                                <View style={getCodeInputStyle(i)}>
                                                    <Text style={{ fontSize: 16 }}>{codeArray.length >= (i + 1) ? codeArray[i] : ""}</Text>
                                                </View>

                                            </View>
                                        )
                                    })
                                }
                            </View>

                        </View>

                    </View>
                </TouchableOpacity>
                <View style={{ alignItems: "center", marginTop: 50 }}>
                    <Text onPress={this.handleSendPhoneCode} >{this.state.sendCode ? `${time}秒后重新获取` : '获取验证码'}</Text>
                </View>
            </View>
        )
    }

}